<div class="{{$viewClass['form-group']}}">
    <div class="{{$viewClass['label']}} control-label">
        <span>{!! $label !!}</span>
    </div>
    <div class="{{$viewClass['field']}}">
        @include('admin::form.error')
        <div id="vue-{{$name}}" style="width: 100%"></div>
        @include('admin::form.help-block')
    </div>
</div>
<script>
    Dcat.ready(function () {
        const { h, resolveComponent, ref } = Vue;
        window.appInit('#vue-{{$name}}',{
            setup(){
                let multiple = @json($extend['multiple']);
                let value  = '{{old($column, $value)}}';

                if(value){
                    if(multiple){
                        if(value.indexOf(",")!==-1){
                            value = value.split(",").map(item=>Number(item))
                        }else{
                            value = [Number(value)]
                        }
                    }else{
                        value = Number(value)?Number(value):null
                    }
                }else{
                    value = multiple?[]:null;
                }
                const category_id = ref(value);
                const isCheck = ref(@json($extend['isCheck']));
                const maxCount = ref(@json($extend['maxCount']));
                const rule = {
                    trigger: ['input', 'blur'],
                    validator () {
                        if (isCheck.value && !category_id.value) {
                            return new Error(@json($extend['ruleText']))
                        }
                    }
                }
                return ()=>{
                    return h('div',{class:'input-group'},[
                        h(resolveComponent('n-form-item'),{ path:"category_id", rule: rule.value, style: "--n-feedback-height:10px;--n-label-height:5px;width:100%"},[
                            h(resolveComponent('n-cascader'),{
                                value: category_id.value,
                                placeholder:"{{$extend['placeholder']}}",
                                expandTrigger:"hover",
                                options:@json($options),
                                multiple:multiple,
                                checkStrategy:@json($extend['checkStrategy']),
                                maxTagCount: maxCount.value ? 'responsive' : undefined,
                                filterable:true,
                                showPath:true,
                                valueField:"id",
                                labelField:"name",
                                'onUpdate:value': (v)=> category_id.value = v
                            })
                        ]),
                        h('input',{type:"hidden",name:"{{$name}}", value:category_id.value, class:"field_{{$name}} _normal_"})
                    ]);
                }
            }
        })
    });
    Dcat.triggerReady();
</script>
